<template>
    <div>
        <div class="nav"></div>
        <div class="top">
            <scroller class="menu-ctt" scroll-direction="horizontal">
                <text @click="selectMenu(-1)" :class="['menu-item', menuSelected==-1?'menu-active':'']">全部</text>
                <text v-for="(cat, idx) in menus" :key="idx" @click="selectMenu(cat.id)" :class="['menu-item', menuSelected == cat.id?'menu-active':'']">{{cat.text}}</text>
            </scroller>
        </div>
        <scroller class="content">
            <div class="product-ctt">
                <div class="product-item" v-for="(item, idx) in items" :key="item.idx">
                    <div class="product-item-a" @click="jump('yhq.detail', item, {navTitle: item.title})">
                        <div>
                            <image :src="item.pictUrl" style="width: 200px; height: 200px;"></image>
                        </div>
                        <div style="width: 530px; padding: 20px;">
                            <text class="product-title">{{item.title}}</text>
                            <div class="flex-row" style="margin-bottom: 15px;">
                                <div class="flex-row">
                                    <!--<text class="label">现价 </text><text class="final_price">{{item.zkFinalPrice}} </text>-->
                                </div>
                                <text class="volume label">已售{{item.volume}}件</text>
                            </div>
                            <div class="flex-row">
                                <div class="flex-row">
                                    <text class="label"><!--券后价--> </text><text class="qhPrice">¥{{item.reservePrice}}</text>
                                </div>
                                <div class="flex-row ">
                                    <div style="margin-right: 20px; margin-bottom: 4px;">
                                        <image v-if="item.userType == '天猫'" src="bmlocal://assets/tmall.png" style="width: 36px; height: 36px;"></image>
                                        <image v-if="item.userType == '淘宝'" src="bmlocal://assets/taobao.png" style="width: 36px; height: 36px;"></image>
                                    </div>
                                    <div class="flex-row quan-ctt">
                                        <!--<text class="quan-label">券</text>-->
                                        <text v-if="item.couponLeft > 0" class="quan-price">{{item.couponPrice}}</text>
                                        <text v-else class="quan-price">已抢完</text>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <loading @loading="loadmore" :display="loadinging ? 'show' : 'hide'">
                <text class="indicator-text">Loading ...</text>
                <loading-indicator class="indicator"></loading-indicator>
            </loading>
        </scroller>
    </div>
</template>

<script>
    import yhq from '../../config/yhq';
    import util from '../../config/util';
    export default {
        data() {
            return {
                items:[],
                menus: [],
                menuSelected: -1,
                pageNo: 0,
                keyword: '',
                cat: '',
                key: '',
                params: {/*hasCoupon: true, */sort: 'total_sales_desc'},
                newList: true,
                loadinging: false
            }
        },
        created() {
            let self = this;
            this.$router.getParams().then(resData => {
                console.log(resData);
                self.id = resData.num_iid;
                self.keyword = resData.q || '';
                if(resData.cat1 && resData.cat1 === -1){
                    self.cat = '';
                    self.setLevelOneMenus(-1);
                } else if(resData.cat2 && resData.cat2 === -1) {
                    self.cat = resData.cat1;
                    let cat = yhq.category[resData.cat1];
                    if(cat.cat){
                        self.cat = cat.cat;
                    } else {
                        self.cat = '';
                        self.keyword += ' ' + cat.value;
                    }
                    self.setLevelTowMenus(resData.cat1, -1);
                } else if(resData.cat2 && resData.cat2 !== -1) {
                    self.cat = resData.cat2;
                    self.setLevelTowMenus(resData.cat1, resData.cat2);
                } else {
                    self.cat = resData.cat;
                    self.setLevelOneMenus(-1);
                }
                self.key = resData.key;
                // self.loadItems();
                self.loadCoupon();
            })
        },
        methods: {
            loadmore(event){
                console.log(event)
                if(this.loadinging === false){
                    this.loadinging = true;
                    this.loadCoupon();
                }
            },
            loadCoupon(){
                let self = this;
                let data = {
                    q: self.keyword,
                    cat: self.cat,
                    pageNo: self.pageNo,
                    pageSize: 20
                };
                if(self.params){
                    Object.assign(data, self.params);
                }
                console.log(data);
                this.$fetch({
                    method: 'GET',
                    url: `${yhq.serverUrl}/yhq/coupon/list?${util.toParams(data)}`
                }).then(resp => {
                    console.log(resp)
                    if(resp.code === 200){
                        let items = resp.res.content || [];
                        items.forEach(row => {
                           /* if(row.couponInfo){
                                let price = row.couponInfo.match(/\d+/ig);
                                if(price.length === 2 && row.zkFinalPrice - price[0] > 0){
                                    row.qhPrice = parseFloat(row.zkFinalPrice - price[1]).toFixed(2);
                                    row.quan = parseFloat(price[1]).toFixed(2);
                                } else {
                                    row.qhPrice = row.zkFinalPrice;
                                    row.quan = 0;
                                }
                            }*/
                        });
                    // .match(/\d+/ig)
                        if(self.newList){
                            self.items = items;
                            self.newList = false;
                        } else {
                            items.forEach(item => {
                                self.items.push(item);
                            });
                        }
                        self.pageNo = self.pageNo + 1;
                    } else {
                        self.$notice.toast('没有获取到数据');
                    }
                    self.loadinging = false;
                }, err => {
                    console.log(error)
                    self.loadinging = false;
                })
            },
            loadItems(params){
                let self = this;
                let q = self.keyword;
                let data = {
                    q: q,
                    pageNo: self.pageNo,
                    pageSize: 8
                };
                if(params){
                    Object.assign(data, params);
                }
                console.log(data);
                this.$fetch({
                    method: 'GET',
                    url: `${yhq.serverUrl}/yhq/coupon/list?${util.toParams(data)}`
                }).then(resp => {
                    console.log(resp)
                    self.pageNo = self.pageNo + 1;
                    if(resp.code === 200 && resp.res.tbk_item_get_response){
                        let items = resp.res.tbk_item_get_response.results.n_tbk_item || [];
                        if(self.newList){
                            self.items = items;
                            self.newList = false;
                        } else {
                            items.forEach(item => {
                                self.items.push(item);
                            });
                        }
                    } else {
                        self.$notice.toast('没有获取到数据');
                    }
                    self.loadinging = false;
                }, err => {
                    console.log(error)
                    self.loadinging = false;
                })
            },
            setLevelOneMenus(idx){
                let catList = [];
                for(let key in yhq.category){
                    let cat = yhq.category[key];
                    catList.push({
                        id: cat.name,
                        text: cat.value
                    });
                }
                this.menus = catList;
                this.selectedIndex = idx;
            },
            setLevelTowMenus(id, idx){
                let catList = [];
                console.log(id)
                let two = yhq.category[id].subs || [];
                console.log(yhq.category[id])
                two.forEach(cat => {
                    catList.push({
                        id: cat.name,
                        text: cat.value
                    });
                });
                this.menus = catList;
                this.selectedIndex = idx;
            },
            selectMenu(idx){
                this.menuSelected = idx;
                this.pageNo = 1;
                this.newList = true;
                this.cat = idx;
                // if(idx === 1){
                //     this.guessLike();
                // } else {
                // this.loadItems(catMap[idx]);
                // }
                this.loadCoupon();
            },
            jump(url, obj){
                // this.$router.toWebView({url: obj.coupon_click_url})
                this.$router.open({
                    name: 'yhq.detail',
                    params: obj,
                    navTitle: obj.title
                })
            }
        }
    }
</script>

<style scoped>
    .menu-ctt{
        flex-direction: row;
        padding: 10px;
        background-color: #fad3dd;
    }
    .menu-item{
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 20px;
        padding-right: 20px;
        border-bottom-width: 4px;
        border-color: #fad3dd;
    }
    .menu-active{
        border-color: #f8285c;
        color: #f8285c;
    }
    .product-title{
        font-size: 28px;
        height: 72px;
        margin-bottom: 15px;
    }
    .final_price{
        font-size: 24px;
        color: #7d7d7d;
        text-decoration: line-through;
    }
    .quan-ctt{
        border-color: #ff6600;
        border-width: 1px;
        border-style: solid;
        background-color: #ffffff;
        color: #ff6600;
        border-radius: 8px;
    }
    .quan-label{
        background-color: #ff6600;
        color: #ffffff;
        font-size: 24px;
        padding: 5px;
    }
    .quan-price{
        font-size: 22px;
        padding: 6px;
        background-color: #ffffff;
        color: #ff6600;
        margin-left: 10px;
        margin-right: 10px;
    }
    .qhPrice{
        color: #ff6600;
        font-size: 36px;
    }
    .label{
        color: #7d7d7d;
        font-size: 24px;
    }
    .volume{
        font-size: 24px;
    }
    .mall{
        width: 58px;
        height: 58px;
    }
    .flex-row{
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .iconfont{
        font-family: iconfont;
    }
    .product-ctt{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        justify-items: flex-start;
    }
    .product-item{
        /*width: 335px;*/
        margin-left: 10px;
        margin-bottom: 20px;
        background-color: #FFFFFF;
    }
    .product-item-a{
        flex-direction: row;
    }
</style>
